<template>
  <div
    v-if="cardType === 1"
    :class="['container', `className${cardType}`, customClass]"
  >
    <div class="container-body">
      <span class="container-subtitle">{{ subtitle }}</span>
      <span class="container-title">{{ title }}</span>
    </div>
    <slot></slot>
  </div>
  <div
    v-else-if="cardType === 2"
    :class="[`className${cardType}`, customClass]"
  >
    <img src="./img/2.png" alt="" />
    <span class="container-title">{{ title }}</span>
    <span class="container-subtitle">{{ subtitle }}</span>
    <slot></slot>
  </div>
  <div
    v-else-if="cardType === 3"
    :class="[`className${cardType}`, customClass]"
  >
    <span class="container-subtitle">{{ subtitle }}</span>
    <img src="./img/3.png" alt="" />
    <span class="container-title">{{ title }}</span>
    <slot></slot>
  </div>
  <div
    v-else-if="cardType === 4"
    :class="[`className${cardType}`, customClass]"
  >
    <span class="container-title">{{ title }}</span>
    <span class="container-subtitle">{{ subtitle }}</span>
    <span class="container-line"></span>
    <slot></slot>
  </div>
  <div
    v-else-if="cardType === 5"
    :class="[`className${cardType}`, customClass]"
  >
    <div class="container-body5">
      <span>{{ title }}</span>
      <div class="container-body5-item">
        <div class="container-body5-item-rect">{{ count1 }}</div>
      </div>
    </div>
    <div class="container-body5">
      <span>{{ subtitle }}</span>
      <div class="container-body5-item">
        <div class="container-body5-item-rect">{{ count2 }}</div>
      </div>
    </div>
    <img src="./img/bg-5.png" alt="" class="bottom-image" />
    <slot></slot>
  </div>
  <div
    v-else-if="cardType === 6"
    :class="[`className${cardType}`, customClass]"
  >
    <span>{{ subtitle }} {{ title }}</span>
    <div class="body6-img">
      <img src="./img/3.png" alt="" />
    </div>
    <slot></slot>
  </div>
  <div
    v-else-if="cardType === 7"
    :class="[`className${cardType}`, customClass]"
  >
    <div class="className7-context">
      <div class="body7-img">
        <img src="./img/3.png" alt="" />
      </div>
      <span>{{ subtitle }} {{ title }}</span>
    </div>
    <slot></slot>
  </div>
  <div
    v-else-if="cardType === 9"
    :class="[`className${cardType}`, customClass]"
  >
    <img src="./img/9.png" alt="" />
    <span class="className9-context"
      >{{ subtitle }}<span class="className9-title">{{ title }}</span></span
    >
    <slot></slot>
  </div>
  <div
    v-else-if="cardType === 10"
    :class="[`className${cardType}`, customClass]"
  >
    <div>{{ subtitle }}</div>
    <div class="className10-context">
      <span>{{ title }}</span>
    </div>
    <slot></slot>
  </div>
  <div
    v-else-if="cardType === 11"
    :class="[`className${cardType}`, customClass]"
  >
    <div class="className11-boxTop">
      <div>{{ subtitle }}</div>
      <span class="className11-boxTopLeft"></span>
      <span class="className11-boxTopRight"></span>
      <span class="className11-boxBottomRight"></span>
      <span class="className11-boxBottomLeft"></span>
    </div>
    <div class="className11-boxBottom">
      <div>{{ title }}</div>
      <span class="className11-boxBottomRight"></span>
      <span class="className11-boxBottomLeft"></span>
    </div>
    <slot></slot>
  </div>
  <div
    v-else-if="cardType === 12"
    :class="[`className${cardType}`, customClass]"
  >
    <div class="className12-left">
      <img src="./img/12.png" alt="" />
      <span>{{ subtitle }}</span>
    </div>
    <img src="./img/line.png" alt="" class="className12-line" />
    <div class="className12-right">
      <span>{{ title }}</span>
      <span>{{ count1 }}</span>
    </div>
    <slot></slot>
  </div>
  <div
    v-else-if="cardType === 13"
    :class="[`className${cardType}`, customClass]"
  >
    <span>{{ title }}</span>
    <div class="className13-context">
      <span>{{ subtitle }}</span>
      <div class="className13-lineBox">
        <span
          v-for="(item, index) in 5"
          :key="index"
          class="partition"
          :style="{ left: index * 20 + '%',background:partitionColor }"
        ></span>
        <div class="className13-line" :style="{ width: title }"></div>
      </div>
    </div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "data-v-digitPanel",
  props: {
    cardType: {
      type: Number,
      default: 1,
    },
    title: {
      type: String | Number,
      default: "",
    },
    subtitle: {
      type: String,
      default: "",
    },
    customClass: {
      type: String,
      default: "",
    },
    count1: {
      type: String | Number,
      default: "",
    },
    count2: {
      type: String | Number,
      default: "",
    },
    partitionColor:{
      type: String,
      default: "#000",
    }
  },
};
</script>
<style lang="less" src='./index.less' scoped></style>